<template>
  <view class="profile-container">
    <!-- 头部用户信息 -->
    <view class="header-section">
      <view class="header-content">
        <view class="title">我的</view>
        <view class="settings-icon" @click="goToSettings">⚙️</view>
      </view>
      
      <view class="user-info">
        <view class="avatar">👤</view>
        <view class="user-details">
          <view class="user-name">{{ userInfo.name || '张管理员' }}</view>
          <view class="user-tag" v-if="userInfo.role === 'admin'">管理员</view>
          <view class="user-org">{{ userInfo.organization || '北京市某某律师事务所' }}</view>
          <view class="verify-status" v-if="userInfo.verified">
            <text class="verify-icon">✓</text>
            <text class="verify-text">已认证{{ userInfo.role === 'admin' ? '管理员' : '律师' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能卡片 -->
    <view class="function-cards">
      <!-- 案件管理 -->
      <view class="function-card" @click="goToCases">
        <view class="card-icon case-icon">📄</view>
        <view class="card-content">
          <view class="card-title">案件管理</view>
          <view class="card-subtitle">创建和管理所有案件</view>
        </view>
        <view class="card-arrow">></view>
      </view>
      
      <!-- 案件统计 -->
      <view class="case-stats">
        <text class="stats-number">25</text>
        <text class="stats-label">总案件数</text>
      </view>

      <!-- 律师管理（管理员功能） -->
      <view class="function-card" v-if="userInfo.role === 'admin'" @click="goToLawyerManagement">
        <view class="card-icon lawyer-icon">👥</view>
        <view class="card-content">
          <view class="card-title">律师管理</view>
          <view class="card-subtitle">管理平台律师账户</view>
        </view>
        <view class="card-arrow">></view>
      </view>

      <!-- 分享记录 -->
      <view class="function-card" @click="goToShareRecords">
        <view class="card-icon share-icon">📤</view>
        <view class="card-content">
          <view class="card-title">分享记录</view>
          <view class="card-subtitle">查看案件分享历史</view>
        </view>
        <view class="card-arrow">></view>
      </view>

      <!-- 系统设置 -->
      <view class="function-card" @click="goToSettings">
        <view class="card-icon settings-icon">⚙️</view>
        <view class="card-content">
          <view class="card-title">系统设置</view>
          <view class="card-subtitle">账号和系统相关设置</view>
        </view>
        <view class="card-arrow">></view>
      </view>

      <!-- 帮助与反馈 -->
      <view class="function-card" @click="goToHelp">
        <view class="card-icon help-icon">❓</view>
        <view class="card-content">
          <view class="card-title">帮助与反馈</view>
          <view class="card-subtitle">使用帮助和问题反馈</view>
        </view>
        <view class="card-arrow">></view>
      </view>

      <!-- 退出登录 -->
      <view class="function-card logout-card" @click="logout">
        <view class="card-icon logout-icon">🚪</view>
        <view class="card-content">
          <view class="card-title logout-title">退出登录</view>
        </view>
        <view class="card-arrow">></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrentUser, logout } from '../../src/services/userService.js'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  onLoad() {
    this.loadUserInfo()
  },
  onShow() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const user = getCurrentUser()
      this.userInfo = user || {
        name: '张管理员',
        role: 'admin',
        organization: '北京市某某律师事务所',
        verified: true
      }
    },
    goToCases() {
      uni.switchTab({ url: '/pages/cases/list' })
    },
    goToLawyerManagement() {
      uni.showToast({ title: '律师管理功能开发中', icon: 'none' })
    },
    goToShareRecords() {
      uni.showToast({ title: '分享记录功能开发中', icon: 'none' })
    },
    goToSettings() {
      uni.navigateTo({ url: '/pages/profile/settings' })
    },
    goToHelp() {
      uni.showModal({
        title: '帮助与反馈',
        content: '如有问题请联系客服：400-123-4567',
        showCancel: false
      })
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            logout()
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

<style>
.profile-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header-section {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 60rpx 24rpx 40rpx;
  color: #fff;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
}

.settings-icon {
  font-size: 32rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #3b82f6;
  margin-right: 24rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: 700;
  margin-bottom: 8rpx;
}

.user-tag {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  margin-bottom: 8rpx;
}

.user-org {
  font-size: 26rpx;
  margin-bottom: 8rpx;
  opacity: 0.9;
}

.verify-status {
  display: flex;
  align-items: center;
}

.verify-icon {
  width: 24rpx;
  height: 24rpx;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rpx;
  color: #fff;
  margin-right: 8rpx;
}

.verify-text {
  font-size: 24rpx;
  opacity: 0.9;
}

.function-cards {
  padding: 24rpx;
}

.function-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 24rpx;
}

.case-icon {
  background: #dbeafe;
  color: #1d4ed8;
}

.lawyer-icon {
  background: #f3e8ff;
  color: #7c3aed;
}

.share-icon {
  background: #dcfce7;
  color: #16a34a;
}

.settings-icon {
  background: #f3f4f6;
  color: #6b7280;
}

.help-icon {
  background: #f3f4f6;
  color: #6b7280;
}

.logout-icon {
  background: #f3f4f6;
  color: #6b7280;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.logout-title {
  color: #ef4444;
}

.card-subtitle {
  font-size: 26rpx;
  color: #6b7280;
}

.card-arrow {
  font-size: 24rpx;
  color: #9ca3af;
}

.case-stats {
  text-align: center;
  padding: 24rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-number {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 26rpx;
  color: #6b7280;
}
</style>
